.nav-list
  display flex
  flex-wrap wrap
  justify-content space-between
  padding 0 40upx

.nav-li
  background-image url('@/pages/color-ui/static/nav-list-bg.png') // cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
  background-position center
  background-size cover
  border-radius 12upx
  margin 0 2.5% 40upx
  padding 30upx
  position relative
  width 45%
  z-index 1

.nav-li::after
  background-color inherit
  border-radius 10upx
  bottom -10%
  content ''
  height 100%
  left 0
  opacity .2
  position absolute
  transform scale(.9, .9)
  width 100%
  z-index -1

.nav-li.cur
  background rgb(94, 185, 94)
  box-shadow 4upx 4upx 6upx rgba(94, 185, 94, .4)
  color #fff

.nav-title
  font-size 32upx
  font-weight 300

.nav-title::first-letter
  font-size 40upx
  margin-right 4upx

.nav-name
  font-size 28upx
  margin-top 20upx
  position relative
  text-transform Capitalize

.nav-name::before
  background #fff
  bottom 0
  content ''
  display block
  height 6upx
  opacity .5
  position absolute
  right 0
  width 40upx

.nav-name::after
  background #fff
  bottom 0
  content ''
  display block
  height 1px
  opacity .3
  position absolute
  right 40upx
  width 100upx

.nav-name::first-letter
  font-size 36upx
  font-weight bold
  margin-right 1px

.nav-li text
  font-size 52upx
  height 60upx
  line-height 60upx
  position absolute
  right 30upx
  text-align center
  top 30upx
  width 60upx

.text-light
  font-weight 300

@keyframes show
  0%
    transform translateY(-50px)

  60%
    transform translateY(40upx)

  100%
    transform translateY(0)

@keyframes show
  0%
    transform translateY(-50px)

  60%
    transform translateY(40upx)

  100%
    transform translateY(0)
